<template>
  <div class="messages">
    <div class="top-togoole">
      <!-- 消息切换 -->
      <van-tabs v-model:active="active" animated>
        <!-- 第一个标签 -->
        <van-tab title="通知"></van-tab>
        <!-- 第二标签 -->
        <van-tab title="消息"></van-tab>
      </van-tabs>
    </div>
    <van-icon name="arrow-left" class="back" size="20px" @click="onback" />
    <div class="notice" v-if="active == 0">
      <!-- 通知 -->
      <div class="tag">
        <span>通知列表</span>
        <span @click="alread"><i></i>全部已读</span>
      </div>
      <van-list offset="10">
        <van-cell-group>
          <van-cell
            v-for="(obj, index) in news.list"
            :key="index"
            @click="singleto(index)"
          >
            <template #icon>
              <van-badge>
                <img
                  src="../assets/imgs/message_slices/xx-4.png"
                  alt="avatar"
                />
                <!-- 循环消息列表,判断状态 ,是否显示-->
                <template #content v-if="obj.state == 1">
                  <van-icon name="dot" class="badge-icon" />
                </template>
              </van-badge>
            </template>
            <template #title
              ><p>{{ obj.title }}</p></template
            >
            <template #label>l{{ obj.msg }} </template>
            <template #value
              ><span>{{ obj.time }}</span></template
            >
          </van-cell>
        </van-cell-group>
      </van-list>
    </div>
    <div class="mesg" v-else>
      <!-- xiaoxi -->
      <div class="tag notice">
        <span>消息列表</span>
        <span><i></i>全部已读</span>
      </div>
      <van-list offset="10">
        <van-cell-group>
          <van-cell v-for="(obj, index) in news.list" :key="index">
            <template #icon>
              <van-badge>
                <img
                  src="../assets/imgs/message_slices/xx-4.png"
                  alt="avatar"
                />
                <!-- 循环消息列表,判断状态 ,是否显示-->

                <template #content v-if="obj.state == 0">
                  <van-icon name="dot" class="badge-icon" />
                </template>
              </van-badge>
            </template>
            <template #title
              ><p>{{ obj.title }}</p></template
            >
            <template #label>l{{ obj.msg }} </template>
            <template #value
              ><span>{{ obj.time }}</span></template
            >
          </van-cell>
        </van-cell-group>
      </van-list>
    </div>
  </div>
</template>
<script>
// import { Toast } from "vant";
import { reactive, ref } from "vue";
// import { Toast } from "vant";
// import { useRouter, useRoute } from "vue-router";
import { useRouter } from "vue-router";
import { getMessagesApi } from "../utils/api";
export default {
  setup() {
    const active = ref(0);
    const news = reactive({
      list: [],
    });
    // const state = reactive({
    //   list: [],
    //   loading: false,
    //   finshed: true,
    // });
    //监听返回键,用于返回
    const router = useRouter();
    // const route = useRoute();
    const onback = () => {
      router.back();
      // console.log(router);
      // console.log(route);
    };
    const alread = () => {
      news.list.map((item) => {
        item.state = 0;
      });
    };
    const singleto = (index) => {
      news.list[index].state = 0;
    };
    return {
      active,
      onback,
      // state,
      news,
      alread,
      singleto,
    };
  },
  mounted() {
    this.getNews();
  },
  methods: {
    async getNews() {
      const res = await getMessagesApi();
      this.news.list = res.data.result;
      // console.log(this.news.list);
    },
  },
};
</script>

<style lang="less" scoped>
.messages {
  .back {
    position: fixed;
    top: 22px;
    transform: translate(12px, -50%);
    z-index: 1001;
  }
  .top-togoole {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    height: 50px;
    background: #fff;
    z-index: 1000;
    /deep/.van-tabs__nav {
      margin: 0 100px;
      .van-tab {
        color: #a3a3a3;
        font-size: 16px;
        font-weight: 600;
      }
      .van-tab--active {
        color: #000;
      }
      .van-tabs__line {
        width: 20px;
        height: 4px;
        background: #f3d24a;
      }
    }
  }
  .tag {
    margin-top: 54px;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    line-height: 24px;
    span {
      font-size: 12px;
      color: #9a9a9a;
      display: flex;
      i {
        align-self: center;
        display: inline-block;
        height: 11px;
        width: 14px;
        margin-right: 7px;
        background: url("../assets/imgs/message_slices/xx-2.png");
        background-size: 100% 100%;
      }
    }
  }
  .van-cell {
    .van-badge__wrapper {
      margin-right: 8px;
      img {
        height: 33px;
        width: 33px;
      }
      /deep/.van-badge {
        border: 0;
        display: block;
        min-width: 8px;
        height: 8px;
        margin: 0;
        padding: 0;
        .van-icon {
          width: 8px;
          height: 8px;
          margin: 0;
          padding: 0;
        }
      }
    }
    /deep/.van-cell__title {
      overflow: hidden;
      padding-left: 9px !important;
      p {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        font-size: 16px;
        color: #505050;
        line-height: 23px;
        width: 90%;
      }
      .van-cell__label {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 13px;
        color: #adadad;
        width: 80%;
      }
    }
    /deep/.van-cell__value {
      flex: initial;
      span {
        white-space: nowrap;
        font-size: 10px;
        color: #adadad;
      }
    }
  }
  ::after {
    border: 0;
  }
}
</style>
